<template>
	<view class="uni_box home">
		<navbar title="提问"></navbar>
		<view class="content">
			<view>
				<view class="label">您的问题：</view>
				<view class="textarea-wrap">
					<u-input v-model="content" type="textarea" :height="330" :auto-height="true" placeholder="请输入您的问题..." />
				</view>
			</view>
			<view style="padding-top: 30rpx;">
				<view class="label">添加图片：<text class="biaomiao">（最多添加三张图片）</text></view>
				<view class="tulist">
					<view class="tuitem" @click="upload" v-if="tuimg.length<=3">
						<image class="xiangji" src="@/pages_subject/static/img/xiangji.png" mode="" />
					</view>
					<view class="tuitem" v-for="(item,index) in tuimg" :key="index" @click="getyulan(item,tuimg)">
						<image class="tuitemimg" :src="item" mode="" />
					</view>
				</view>
			</view>

		</view>
		<view class="jiaojuean">
			<view class="tibtn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				headimg: '',
				tuimg: [],
				content: '',
				courseId: '',
				qid: ''
			}
		},
		onLoad({
			courseId,
			qid
		}) {
			this.courseId = Number(courseId)
			this.qid = Number(qid)
		},
		methods: {
			async submit() {
				if (!this.content) {
					return this.$u.toast("请输入问题描述");
				}
				let res = await this.$u.api.addQuestionByCourse({
					qid: this.qid,
					course_id: this.courseId,
					content: this.content,
					images: this.tuimg.toString()
				});
				this.$u.toast("提交成功");
				uni.navigateBack()
			},
			upload(e) {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						this.unloadtou()
					}
				});
			},
			unloadtou() {
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/v1.common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
						'shopId': uni.getStorageSync('shopId'),
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data);
						let tuimg = that.tuimg
						tuimg.push(JSON.parse(uploadFileRes.data).data.fullurl)
						that.tuimg = tuimg
					}
				});
			},
			getyulan(item, list) {
				uni.previewImage({
					current: item, //预览图片的下标
					urls: list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.label {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		margin-bottom: 42rpx;
		margin-top: 20rpx;
	}

	.textarea-wrap {
		background: rgba(253, 136, 79, 0.05);
		border-radius: 8rpx;
		padding: 28rpx;

	}

	.biaomiao {
		color: rgba(153, 153, 153, 1);
		font-size: 20rpx;
	}

	.tulist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.tuitem {
			background: #FFFFFF;
			border-radius: 5rpx;
			box-shadow: 0rpx 3rpx 35rpx 0rpx rgba(128, 128, 128, 0.13);
			width: 150rpx;
			height: 150rpx;
			border: 1rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 20rpx 20rpx 0;
			position: relative;

			.xiangji {
				width: 46rpx;
				height: 42rpx;
			}

			.tuitemimg {
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
	}

	.jiaojuean {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 20rpx 0rpx rgba(202, 205, 217, 0.14);
		// background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 0 30rpx;

		.tibtn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 40rpx;
			width: 100%;
		}
	}
</style>